<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { useWallpaperStore } from '@/store/wallpaper.js'
import request from '@/utils/request'
import API from '@/utils/API'
import notice from '@/pages/notice/notice.vue'

const useWallpaper = useWallpaperStore()

const current = ref(0)

const change = (e) => {
	current.value = e.detail.current
}

const mode = ref('round')

const dotsStyles = reactive({
	backgroundColor: 'rgba(255, 255, 255,0.3)',
	border: '1px rgba(255, 255, 255,0.3) solid',
	color: '#fff',
	selectedBackgroundColor: 'rgba(255, 255, 255,0.9)',
	selectedBorder: '1px rgba(255, 255, 255,0.9) solid'
})

// 轮播图列表
const bannerList = ref([])

const getBanner = async () => {
	const { data } = await request({
		url: API.getBanner
	})
	
	bannerList.value = data
}

// 公告
const wallNewsList = ref([])

const getWallNewsList = async () => {
	const { data } = await request({
		url: API.getWallNewsList,
		data: {
			select: true
		}
	})
	
	wallNewsList.value = data
}

// 每日推荐(随机9张)
const randomWall = ref([])

const getRandomWall = async () => {
	const { data } = await request({
		url: API.getRandomWall
	})
	
	randomWall.value = data.map(item => {
		return {
			...item,
			picurl: item.smallPicurl.replace('_small.webp', '.jpg')
		}
	})
}

// 跳转到详情大图
const ClickToDetail = (index) => {
	useWallpaper.wallpaperList = randomWall.value
	useWallpaper.currIndex = index
	uni.navigateTo({
		url: '/pages/preview/preview'
	})
}

// 分类图片
const classifyWall = ref([])

const getClassifyWall = async () => {
	const { data } = await request({
		url: API.getClassifyWall,
		data: {
			select: true
		}
	})
	
	console.log(data)
	classifyWall.value = data
}

// 分享给好友
onShareAppMessage((e) => {
	// console.log(e)
	return {
		title: '咸虾米壁纸',
		path: '/pages/index/index'
	}
})

onLoad(() => {
	getBanner()
	getWallNewsList()
	getRandomWall()
	getClassifyWall()
})
</script>

<template>
	<view class="layout pageBg">
		<custom-navbar title="推荐" />
		
		<view class="banner">
			<uni-swiper-dot :info="bannerList" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
				<swiper
					class="swiper-box"
					@change="change"
					circular
					autoplay
					:interval="4000"
				>
					<swiper-item v-for="banner in bannerList" :key="banner._id">
						<view class="swiper-item">
							<image :src="banner.picurl" mode="aspectFill" class="banner-img"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<notice :newsList="wallNewsList" />
		
		<view class="layer recommend">
			<common-title>
				<template	#name>
					<view>每日推荐</view>
				</template>
				<template	#custom>
					<view class="date">
						<uni-icons type="calendar" size="20" color="#28b389"></uni-icons>
						<view class="date-str">
						  <uni-dateformat :date="Date.now()" format="dd"></uni-dateformat>号
						</view>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x class="scroll-container">
					<view class="img-box" v-for="(item, index) in randomWall" :key="item._id" @click="ClickToDetail(index)">
						<image :src="item.smallPicurl" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
			
		<view class="layer select">
			<common-title>
				<template	#name>
					<view>专题精选</view>
				</template>
				<template	#custom>
					<navigator url="/pages/classify/classify" open-type="reLaunch" class="more">more+</navigator>
				</template>
			</common-title>
			<view class="content">
				<theme-item showType="classify" v-for="item in classifyWall" :key="item._id" :item="item" />
				<theme-item showType="more" />
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.layout {
	// padding-top: 150rpx;
	
	.banner {
		width: 750rpx;
		height: 340rpx;
		margin: 10rpx 0;
		
		.swiper-item {
			width: 100%;
			height: 100%;
			padding: 0 25rpx;
			
			.banner-img {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}
	
	.layer {
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		
		.scroll-container {
			width: 750rpx;
			white-space: nowrap;
			
			.img-box {
				display: inline-block;
				width: 200rpx;
				height: 430rpx;
				margin: 0 10rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			
			.img-box:first-child {
				margin-left: 25rpx;
			}
			
			.img-box:last-child {
				margin-right: 25rpx;
			}
		}
	}
	
	.recommend {
		.date {
			display: flex;
			align-items: center;
			color: $uni-main-color;
			
			.date-str {
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}
	}
	
	.select {
		.more {
			color: $uni-gray-1;
		}
		
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			padding: 0 25rpx;
		}
	}
}
</style>
